<template>
	<view class="ex-mall-tab-page" >
		<!-- 头部 -->
		<view class="ex-mall-header" >
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
					<view class="ex-mall-header-btn"  @click="toSearch">
						<text class="ex-mall-header-btn-icon ri-search-line" style="color: #FFFFFF;"></text>
					</view>
				</view>
				<view class="ex-mall-header-title" >红包封面</view>
				<view class="ex-mall-header-right" >
					<view class="ex-mall-header-btn" style="background-color: #404040;" @click="toFavorite">
						<text class="ex-mall-header-btn-icon ri-bookmark-line" style="color: #FFFFFF;"></text>
					</view>
				</view>
			</view>
		</view>
<uni-notice-bar :show-icon="true" :scrollable="true" :speed="40" :single="true" :text="notice" />
		<!-- 轮播 -->
		<view class="carousel" >
			<swiper class="swiper" indicator-dots autoplay :interval="3000" circular>
				<swiper-item class="swiper-item" v-for="(x, xi) in carousels" :key="xi">
					<view class="carousel-item">
						<image class="img" :src="x.url"></image>
						<view class="show">
							<view class="word">
								<view class="w1">{{x.title}}</view>
								<view class="w2">{{x.info}}</view>
							</view>
							<view class="enter">
								<text class="icon ri-arrow-right-s-line"></text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品专栏 -->
		<view class="ex-mall-panel column" >
			<view class="ex-mall-panel-title" >
				<view class="text">私人定制案例</view>
				<view class="more">
					<text class="icon ri-more-2-fill"></text>
				</view>
			</view>
			<view class="ex-mall-panel-content" >
				<scroll-view scroll-x>
					<view class="column-list">
						<view class="item" v-for="(xx, xxi) in columns" :key="xxi" @click="toDetails(xx)">
							<view class="thumbnail">
								<image class="img" :src="xx.cover" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" >
								<view class="title">{{xx.name}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 商品专题 -->
		<view class="special" >
			<view class="item" @click="diyMoney">
				<view class="thumbnail">
					<image class="img" src="https://img.yourtools.icu/images/hbfm.png" mode="aspectFill"></image>
				</view>
				<view class="word" style="color: #000000;">
					<view class="title">自定义红包封面</view>
					<view class="info">50+ 可自定义图片红包封面</view>
				</view>
				<view class="btn">前往设计</view>
			</view>
		</view>

		<!-- 推荐商品 -->
		<view class="ex-mall-panel list" >
			<view class="ex-mall-panel-title" >
				<view class="text">推荐</view>
			</view>
			<view class="ex-mall-panel-content" >
				<view class="list-box">
					<view class="list-column left">
						<view class="item" v-for="(x, xi) in goods" :key="xi" v-if="(xi + 1) % 2 != 0" @click="toDetails(x)">
							<view class="thumbnail">
								<image class="img" :src="x.cover" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" >
								<view class="title">{{x.name}}</view>
								<view class="price">{{x.price}}积分</view>
							</view>
						</view>
					</view>
					<view class="list-column right">
						<view class="item" v-for="(x, xi) in goods" :key="xi" v-if="(xi + 1) % 2 === 0" @click="toDetails(x)">
							<view class="thumbnail">
								<image class="img" :src="x.cover" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" >
								<view class="title">{{x.name}}</view>
								<view class="price">{{x.price}}积分</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="loadmore" >
			<view class="text" v-if="loadMoreState === 'loadmore'">上拉加载更多</view>
			<view class="text" v-else-if="loadMoreState === 'loading'">正在加载...</view>
			<view class="text" v-else-if="loadMoreState === 'nomore'">没有更多了</view>
		</view>
	</view>
</template>

<script>
	import uniNoticeBar from '../../components/uni-notice-bar/uni-notice-bar.vue'
	import {getMoneyCover} from '../../common/api/money.js'
	import {getNotice} from '../../common/api/notice.js'
	let systemInfo = {}
	export default {
		components:{uniNoticeBar},
		data() {
			return {
				reachBottom: false,
				loadMoreState: 'loadmore',
				/* 轮播 */
				carousels:[{
					url: 'https://img.yourtools.icu/wx.jpg',
					title: '微信二维码',
					info: '作者微信二维码',
					link: ''
				}],
				notice:"",
				page:1,
				pages:1,
				keyword:"",
				/* 专栏 */
				columns: [],
				/* 推荐 */
				goods: []
			}
		},
		onLoad() {
			//#ifdef MP
			wx.showShareMenu({
			  withShareTicket: true,
			  menus: ['shareAppMessage', 'shareTimeline']
			})
			//#endif
		},
		onShow() {
			console.log(this.keyword)
			if(this.keyword){
				this.goods=[]
				this.getGoods(1)
			}
		},
		mounted() {
			getNotice({isShow:1,type:1}).then((res)=>{
				this.notice=res.data[0].content
			})
			//后期改成私人案例
			getMoneyCover().then(res=>{
				console.log(res.data)
				this.columns=res.data.list
			})
		},
		onReachBottom() {
			this.getGoods(this.page);
		},
		methods: {
			diyMoney(){
				uni.previewImage({
					urls: ['https://img.yourtools.icu/zzhbfm.png']
				});
			},
			toDetails(data){
				uni.navigateTo({
					url:"details?id="+data.id
				})
			},
			getGoods(page) {
				if(page<=this.pages){
					this.loadMoreState ="loading"
					getMoneyCover({page:page,name:this.keyword}).then(res=>{
						console.log(res.data)
						this.pages=res.data.pages
						if(res.data.hasNextPage){
							this.loadMoreState ="loadmore"
						}else{
							this.loadMoreState ="nomore"
						}
						this.page++
						this.goods=this.goods.concat(res.data.list)
					})
				}
			},
			toSearch() {
				uni.navigateTo({
					url: 'search'
				})
			},
			toFavorite() {
				uni.navigateTo({
					url: '/pages/favorite/favorite'
				})
			}
		}
	}
</script>

<style lang="scss">
	.ex-mall-panel-title {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 32px 28px 24px 28px;
	    font-size: 21px;
	    font-weight: 600;
	    border-radius: 2em 2em 0 0;
	    overflow: hidden;
		background-color: #F7F7F7;
	}
	.ex-mall-panel-content{
		background-color: #F7F7F7;
	}
	.ex-mall-header {
	    position: sticky;
	    top: 0;
	    z-index: 99;
	    padding: 16px 28px;
	    border-radius: 0 0 28px 28px;
	    overflow: hidden;
		background-color: #FFFFFF
	}
	.ex-mall-header-btn {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 38px;
	    height: 38px;
	    border-radius: 12px;
		background-color: #F76842;
	}
	.ex-mall-header-mp-weixin-fill {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    width: 100%;
	    height: 50px;
	    font-size: 15px;
	}
	.ex-mall-header-content {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	}
	.carousel {
		width: 100%;
		height: 48vw;
		margin: 0 auto;
		padding-top: 12px;

		&>.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				padding: 0 28px;
				box-sizing: border-box;

				&:nth-child(3n-2) {
					.carousel-item {
						&>.img {
							background-color: #784B32;
						}
					}
				}

				&:nth-child(3n-1) {
					.carousel-item {
						&>.img {
							background-color: #9B927D;
						}
					}
				}

				&:nth-child(3n) {
					.carousel-item {
						&>.img {
							background-color: #96824C;
						}
					}
				}
			}

			.carousel-item {
				position: relative;
				width: 100%;
				height: 100%;
				border-radius: 12px;
				overflow: hidden;

				&>.img {
					display: block;
					width: 100%;
					height: 100%;
				}

				&>.show {
					position: absolute;
					right: 20px;
					bottom: 30px;
					left: 20px;
					display: flex;

					&>.word {
						flex: 1;

						&>.w1 {
							font-size: 16px;
							font-weight: 600;
							color: #404040;
						}

						&>.w2 {
							margin-top: 10px;
							font-size: 14px;
							color: #000000;
						}
					}

					&>.enter {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 38px;
						height: 38px;
						background-color: #FFFFFF;
						border-radius: 12px;

						&>.icon {
							font-size: 22px;
							color: #292929;
						}
					}
				}
			}
		}
	}

	.ex-mall-panel.column {
		padding-top: 32px;

		.ex-mall-panel-content {
			.column-list {
				display: flex;
				align-items: flex-start;

				&>.item {
					padding: 0 16px 24px 0;

					&:first-child {
						padding-left: 28px;
					}

					&:last-child {
						padding-right: 28px;
					}

					&:nth-child(odd) {
						&>.thumbnail {
							&>.img {
								background-color: #0EAA90;
							}
						}
					}

					&:nth-child(even) {
						&>.thumbnail {
							&>.img {
								background-color: #F8E3DC;
							}
						}
					}

					&>.thumbnail {
						position: relative;

						&>.img {
							position: relative;
							z-index: 1;
							display: block;
							// width: 188px;
							// height: 218px;
							width: 154px;
							height: 200px;
							border-radius: 12px;
						}

						&>.btn {
							position: absolute;
							top: 14px;
							right: 14px;
							z-index: 10;
							display: flex;
							justify-content: center;
							align-items: center;
							width: 28px;
							height: 28px;
							border-radius: 9px;
							background-color: #FFFFFF;

							&.favorite {
								&>.icon {
									font-size: 15px;
									color: #292929;
								}
							}
						}
					}

					&>.info {
						line-height: 1;

						&>.title {
							margin-top: 20px;
							line-height: 1.3;
							font-size: 15px;
							font-weight: 600;
						}

						&>.price {
							margin-top: 10px;
							font-size: 13px;
						}
					}
				}
			}
		}
	}

	.special {
		padding: 28px;

		&>.item {
			position: relative;
			width: calc(100vw - (28px * 2));
			height: calc(100vw - (28px * 2));
			margin-top: 28px;

			&:first-child {
				margin-top: 0;
			}

			&:nth-child(3n-2) {
				&>.thumbnail {
					&>.img {
						background-color: #98847D;
					}
				}
			}

			&:nth-child(3n-1) {
				&>.thumbnail {
					&>.img {
						background-color: #A06441;
					}
				}
			}

			&:nth-child(3n) {
				&>.thumbnail {
					&>.img {
						background-color: #645E66;
					}
				}
			}

			&>.thumbnail {
				width: 100%;
				height: 100%;

				&>.img {
					display: block;
					width: 100%;
					height: 100%;
					border-radius: 12px;
				}
			}

			&>.word {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				text-align: center;
				width: fit-content;
				&>.title {
					font-size: 29px;
					font-weight: 700;
					color: #000000;
				}

				&>.info {
					margin-top: 12px;
					font-size: 14px;
					color: #000000;
				}
			}

			&>.btn {
				position: absolute;
				bottom: 38px;
				left: 50%;
				transform: translateX(-50%);
				width: 146px;
				height: 58px;
				text-align: center;
				line-height: 58px;
				font-size: 14px;
				font-weight: 500;
				color: #292929;
				background-color: #FFFFFF;
				border-radius: 12px;
			}
		}
	}

	.ex-mall-panel.list {
		.ex-mall-panel-content {
			.list-box {
				display: flex;

				.list-column {
					flex: 1;

					&.left {
						padding: 0 6px 0 28px;

						&>.item {
							&:nth-child(odd) {
								&>.thumbnail {
									&>.img {
										background-color: #0EAA90;
									}
								}
							}

							&:nth-child(even) {
								&>.thumbnail {
									&>.img {
										background-color: #F8E3DC;
									}
								}
							}
						}
					}

					&.right {
						padding: 0 28px 0 6px;

						&>.item {
							&:nth-child(odd) {
								&>.thumbnail {
									&>.img {
										background-color: #A8A8A9;
									}
								}
							}

							&:nth-child(even) {
								&>.thumbnail {
									&>.img {
										background-color: #7F8688;
									}
								}
							}
						}
					}

					&>.item {
						width: 100%;
						padding-bottom: 24px;

						&>.thumbnail {
							position: relative;

							&>.img {
								position: relative;
								z-index: 1;
								display: block;
								width: 100%;
								height: 53vw;
								border-radius: 12px;
							}

							&>.btn {
								position: absolute;
								top: 14px;
								right: 14px;
								z-index: 10;
								display: flex;
								justify-content: center;
								align-items: center;
								width: 28px;
								height: 28px;
								border-radius: 9px;
								background-color: #FFFFFF;

								&.favorite {
									&>.icon {
										font-size: 15px;
										color: #292929;
									}
								}
							}
						}

						&>.info {
							line-height: 1;

							&>.title {
								margin-top: 20px;
								line-height: 1.3;
								font-size: 15px;
								font-weight: 600;
							}

							&>.price {
								margin-top: 10px;
								font-size: 13px;
							}
						}
					}
				}
			}
		}
	}

	.loadmore {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 78px;

		&>.text {
			font-size: 14px;
			font-weight: 600;
		}
	}
</style>
